<?php

/* @var $this \yii\web\View */
/* @var $content string */

use backend\assets\AppAsset;
use yii\helpers\Html;
use yii\widgets\Breadcrumbs;
AppAsset::register($this);
if(!Yii::$app->controller->module->id == 'app')
{
    \yii\web\YiiAsset::register($this);
}
$this->params['breadcrumbs'] = isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [];
$this->title = /*Yii::$app->params['title'].*/$this->title;
$menu = isset(Yii::$app->params['menu']) ? Yii::$app->params['menu'] : [];
$activeMenuId = isset(Yii::$app->params['activeMenuId']) ? Yii::$app->params['activeMenuId'] : [];
?>
<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>" class="app">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--[if lt IE 9]>
    <script src="/public/js/ie/html5shiv.js" cache="false"></script>
    <script src="/public/js/ie/respond.min.js" cache="false"></script>
    <script src="/public/js/ie/excanvas.js" cache="false"></script>
    <![endif]-->
    <meta charset="<?= Yii::$app->charset ?>">
    <?= Html::csrfMetaTags() ?>
    <title><?= Html::encode($this->title) ?></title>
    <?php $this->head() ?>
</head>
<body>
<?php $this->beginBody() ?>
<section class="vbox">
    <header class="bg-dark dk header navbar navbar-fixed-top-xs">
        <div class="navbar-header aside-md">
            <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav">
                <i class="fa fa-bars"></i>
            </a>
            <a href="#" class="navbar-brand" data-toggle="fullscreen">
                <img src="/public/images/logo.png" class="m-r-sm">
                Notebook
            </a>
            <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user">
                <i class="fa fa-cog"></i>
            </a>
        </div>
        <ul class="nav navbar-nav hidden-xs">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle dker" data-toggle="dropdown">
                    <i class="fa fa-building-o"></i>
                    <span class="font-bold">Activity</span>
                </a>
                <section class="dropdown-menu aside-xl on animated fadeInLeft no-borders lt">
                    <div class="wrapper lter m-t-n-xs">
                        <a href="#" class="thumb pull-left m-r">
                            <img src="/public/images/avatar.jpg" class="img-circle">
                        </a>
                        <div class="clear">
                            <a href="#">
                                <span class="text-white font-bold">@Mike Mcalidek</span>
                            </a>
                            <small class="block">Art Director</small>
                            <a href="#" class="btn btn-xs btn-success m-t-xs">Upgrade</a>
                        </div>
                    </div>
                    <div class="row m-l-none m-r-none m-b-n-xs text-center">
                        <div class="col-xs-4">
                            <div class="padder-v"> <span class="m-b-xs h4 block text-white">245</span> <small class="text-muted">Followers</small> </div>
                        </div>
                        <div class="col-xs-4 dk">
                            <div class="padder-v"> <span class="m-b-xs h4 block text-white">55</span> <small class="text-muted">Likes</small> </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="padder-v"> <span class="m-b-xs h4 block text-white">2,035</span> <small class="text-muted">Photos</small> </div>
                        </div>
                    </div>
                </section>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right hidden-xs nav-user">
            <li class="hidden-xs">
                <a href="#" class="dropdown-toggle dk" data-toggle="dropdown">
                    <i class="fa fa-bell"></i>
                    <span class="badge badge-sm up bg-danger m-l-n-sm count" style="display: inline-block;">3</span>
                </a>
                <section class="dropdown-menu aside-xl">
                    <section class="panel bg-white">
                        <header class="panel-heading b-light bg-light"> <strong>You have <span class="count" style="display: inline;">3</span> notifications</strong> </header>
                        <div class="list-group list-group-alt animated fadeInRight">
                            <a href="#" class="media list-group-item" style="display: block;">
                                <span class="pull-left thumb-sm text-center">
                                    <i class="fa fa-envelope-o fa-2x text-success"></i>
                                </span>
                                <span class="media-body block m-b-none">
                                    Sophi sent you a email<br>
                                    <small class="text-muted">1 minutes ago</small>
                                </span>
                            </a>
                            <a href="#" class="media list-group-item">
                                <span class="pull-left thumb-sm"> <img src="/public/images/avatar.jpg" alt="John said" class="img-circle"> </span>
                                <span class="media-body block m-b-none">
                                    Use awesome animate.css<br>
                                    <small class="text-muted">10 minutes ago</small>
                                </span>
                            </a>
                            <a href="#" class="media list-group-item">
                                <span class="media-body block m-b-none">
                                    1.0 initial released<br>
                                    <small class="text-muted">1 hour ago</small>
                                </span>
                            </a>
                        </div>
                        <footer class="panel-footer text-sm">
                            <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                            <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
                        </footer>
                    </section>
                </section>
            </li>
            <li class="dropdown hidden-xs">
                <a href="#" class="dropdown-toggle dker" data-toggle="dropdown">
                    <i class="fa fa-fw fa-search"></i>
                </a>
                <section class="dropdown-menu aside-xl animated fadeInUp">
                    <section class="panel bg-white">
                        <form role="search">
                            <div class="form-group wrapper m-b-none">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-info btn-icon">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </form>
                    </section>
                </section>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <span class="thumb-sm avatar pull-left">
                        <img src="/public/images/avatar.jpg">
                    </span>
                    John.Smith
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu animated fadeInRight">
                    <span class="arrow top"></span>
                    <li>
                        <a href="#">Settings</a>
                    </li>
                    <li>
                        <a href="profile.html">Profile</a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="badge bg-danger pull-right">3</span>
                            Notifications
                        </a>
                    </li>
                    <li>
                        <a href="docs.html">Help</a>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="modal.lockme.html" data-toggle="ajaxModal">Logout</a>
                    </li>
                </ul>
            </li>
        </ul>
    </header>
    <section>
        <section class="hbox stretch"> <!-- .aside -->
            <aside class="bg-dark lter aside-md hidden-print" id="nav">
                <section class="vbox">
                    <header class="header bg-primary lter text-center clearfix">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-dark btn-icon" title="New project"><i class="fa fa-plus"></i></button>
                            <div class="btn-group hidden-nav-xs">
                                <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown"> Switch Project <span class="caret"></span> </button>
                                <ul class="dropdown-menu text-left">
                                    <li><a href="#">Project</a></li>
                                    <li><a href="#">Another Project</a></li>
                                    <li><a href="#">More Projects</a></li>
                                </ul>
                            </div>
                        </div>
                    </header>
                    <section class="w-f scrollable">
                        <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; ">
                            <div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="5px" data-color="#333333" style="overflow: hidden; width: auto;">
                                <!-- nav -->
                                <nav class="nav-primary hidden-xs">
                                    <ul class="nav">
                                        <li <?php echo !is_array($activeMenuId) || !$activeMenuId ? 'class="active"': '';?>>
                                            <a href="/index">
                                                <i class="fa fa-dashboard icon">
                                                    <b class="bg-dark"></b>
                                                </i>
                                                <span>Workset</span>
                                            </a>
                                        </li>
                                        <?php foreach($menu as $key => $item):?>
                                        <li <?php echo is_array($activeMenuId) && in_array($item['id'], $activeMenuId) ? 'class="active"': '';?>>
                                            <a href="<?php echo \yii\helpers\ArrayHelper::getValue($item, 'url', 'javascript:void(0)')?>">
                                                <i class="fa <?= \yii\helpers\ArrayHelper::getValue($item['options'], 'icon', 'fa-columns')?> icon">
                                                    <b class="bg-primary"></b>
                                                </i>
                                                <span class="pull-right">
                                                    <i class="fa fa-angle-down text"></i>
                                                    <i class="fa fa-angle-up text-active"></i>
                                                </span>
                                                <span><?php echo \yii\helpers\ArrayHelper::getValue($item, 'label')?></span>
                                            </a>
                                            <?php if (is_array($item['items'])):?>
                                            <ul class="nav lt">
                                                <?php foreach($item['items'] as $k => $childItem):?>
                                                <li <?php echo is_array($activeMenuId) && in_array($childItem['id'], $activeMenuId) ? 'class="active"': '';?>>
                                                    <a href="<?php echo \yii\helpers\ArrayHelper::getValue($childItem, 'url', 'javascript:void(0)')?>">
                                                        <i class="fa <?= \yii\helpers\ArrayHelper::getValue($item['options'], 'icon', 'fa-angle-right')?>"></i>
                                                        <span><?php echo \yii\helpers\ArrayHelper::getValue($childItem, 'label')?></span>
                                                    </a>
                                                </li>
                                                <?php endforeach;?>
                                            </ul>
                                            <?php endif;?>
                                        </li>
                                        <?php endforeach;?>
                                    </ul>
                                </nav>
                                <!-- / nav -->
                            </div>
                            <div class="slimScrollBar" style="background: rgb(51, 51, 51); width: 5px; position: absolute; top: -396px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 0px; height: 189.343px;">
                            </div>
                            <div class="slimScrollRail" style="width: 5px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 0px;">
                            </div>
                        </div>
                    </section>
                    <footer class="footer lt hidden-xs b-t b-dark">
                        <div id="chat" class="dropup">
                            <section class="dropdown-menu on aside-md m-l-n">
                                <section class="panel bg-white">
                                    <header class="panel-heading b-b b-light">Active chats</header>
                                    <div class="panel-body animated fadeInRight">
                                        <p class="text-sm">No active chats.</p>
                                        <p><a href="#" class="btn btn-sm btn-default">Start a chat</a></p>
                                    </div>
                                </section>
                            </section>
                        </div>
                        <div id="invite" class="dropup">
                            <section class="dropdown-menu on aside-md m-l-n">
                                <section class="panel bg-white">
                                    <header class="panel-heading b-b b-light"> John <i class="fa fa-circle text-success"></i> </header>
                                    <div class="panel-body animated fadeInRight">
                                        <p class="text-sm">No contacts in your lists.</p>
                                        <p><a href="#" class="btn btn-sm btn-facebook"><i class="fa fa-fw fa-facebook"></i> Invite from Facebook</a></p>
                                    </div>
                                </section>
                            </section>
                        </div>
                        <a href="#nav" data-toggle="class:nav-xs" class="pull-right btn btn-sm btn-dark btn-icon"> <i class="fa fa-angle-left text"></i> <i class="fa fa-angle-right text-active"></i> </a>
                        <div class="btn-group hidden-nav-xs">
                            <button type="button" title="Chats" class="btn btn-icon btn-sm btn-dark" data-toggle="dropdown" data-target="#chat"><i class="fa fa-comment-o"></i></button>
                            <button type="button" title="Contacts" class="btn btn-icon btn-sm btn-dark" data-toggle="dropdown" data-target="#invite"><i class="fa fa-facebook"></i></button>
                        </div>
                    </footer>
                </section>
            </aside>
            <!-- /.aside -->
            <section id="content">
                <section class="vbox">
                    <section class="scrollable padder">
                        <?php
                        echo Breadcrumbs::widget([
                            'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
                            'class'=>'no-border no-radius b-b b-light pull-in',
                        ]);
                        ?>
                        <div class="m-b-md">
                            <h3 class="m-b-none"><?= $this->title?></h3>
                        </div>
                        <?= $content ?>
                    </section>
                </section>
                <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen" data-target="#nav"></a>
            </section>
            <aside class="bg-light lter b-l aside-md hide" id="notes">
                <div class="wrapper">Notification</div>
            </aside>
        </section>
    </section>
</section>
<?php $this->endBody() ?>
</body>
</html>
<?php $this->endPage() ?>
